<template>
  <div
    :class="props.required ? 'contact' : 'bg'"
    :style="{ width: props.width, padding: props.padding }"
  >
    <div class="nav" @click="changeNav">
      <ol>
        <a :href="item.id" v-for="(item, index) in titleList">
          <li :class="index == 0 ? 'active' : ''">
            {{ item.name }}
          </li></a
        >
      </ol>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  required: {
    type: Boolean,
    required: false,
  },
  width: {
    type: String,
    default: "100%",
  },
  padding: {
    type: String,
    default: "",
  },
  list: {
    type: Array,
    default: [],
  },
});
const titleList = [
  {
    name: "个人简介",
    id: "#one",
  },
  {
    name: "相关形象",
    id: "#two",
  },
  {
    name: "个人优势",
    id: "#three",
  },
  {
    name: "项目经验",
    id: "#four",
  },
];
const changeNav = (event) => {
  
  if (event.target.tagName == "LI") {
    const parent = event.target.parentNode.parentNode;
    parent
      .querySelectorAll("a")
      .forEach((item) => item.querySelector("li").classList.remove("active"));
    event.target.classList.add("active");
    
  }
};
</script>

<style scoped lang="scss">
.bg {
  background-color: #fff;
}
.contact {
  background-color: #fff;

  transition: all 0.5s ease-in-out;
}
.contact:hover {
  /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
 // box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.1);
  //transform: translateY(-3px);
}
.nav {
  background-color: #fff;
  cursor: pointer;
  ol {
    display: flex;
    border-bottom: $bordershadowgrey;
    height: 58px;
    
    li {
      margin: 0 20px;
      padding: 15px 0px;
      font-weight: bold;
      color: #999;
      font-size: 18px;
    }
    .active,li:hover {
      color: #02c9ab;
      border-bottom: 4px solid $green;
      border-radius: 1px;
      transition: all 0.2s ease-in-out;
      opacity: 1;
    }
  }
}
a {
  color: #999;
  text-decoration: none;
}
</style>
